import classNames from 'classnames'
import { FC } from 'react'

import './RightSafeGovernTabItem.less'

export type Option = {
  label: string
  value: string | number
}

export type RightSafeGovernTabItemProps = {
  label: string
  value: string | number
  activeTabValue?: string | number
  onChange?: (value: string | number, option: Option) => void
}

const RightSafeGovernTabItem: FC<RightSafeGovernTabItemProps> = ({
  label,
  value,
  activeTabValue,
  onChange
}) => {
  const clickHandler = () => {
    onChange?.(value, { label, value })
  }

  return (
    <div
      className={classNames('right-safe-govern-tab-item', {
        active: activeTabValue === value
      })}
      onClick={clickHandler}
    >
      {label}
    </div>
  )
}

export default RightSafeGovernTabItem
